<template>
  <!--右键菜单-->
  <div
      :id="rightMenuID"
      class="right-menu"
      :style="{
      display: rightMenuStatus,
      top: rightMenuTop,
      left: rightMenuLeft
    }"
  >
<!--    <ul>-->
<!--      <li>-->
<!--        <div v-for="item in rightMenuList" :key="item.id">-->
<!--          &lt;!&ndash;status为true时, 代表禁用&ndash;&gt;-->
<!--          <span @click="sendEvent('click', item)"-->
<!--          >{{ getName(item) }}-->
<!--          </span>-->
<!--        </div>-->
<!--      </li>-->
<!--    </ul>-->
    <z-dropdown-menu class="z-static-dropdown">
      <el-dropdown-item
          @click.native="sendEvent('click', item)"
          v-for="item in rightMenuList" :key="item.id">{{getName(item)}}</el-dropdown-item>
    </z-dropdown-menu>
  </div>
</template>

<script>
import {getSelectionText, keepSelection, restoreSelection} from "./state";

export default {
  name: "right-menu",
  props: {
    rightMenuID: String,
    rightMenuStatus: String,
    rightMenuTop: String,
    rightMenuLeft: String,
    rightMenuList: Array,
    rightMenuTarget: null
  },
  data() {
    return {
      ctx: {
        restoreSelection,
        keepSelection
      }
    }
  },
  methods: {
    sendEvent(name, item) {
      let selectedText = getSelectionText()
      item.handler(name, {
        ...item.text,
        ctx: this.ctx,
        parameter: item.parameter,
        target: this.rightMenuTarget,
        selectedText,
      })
    },
    getName(item) {
      return item?.text?.name ?? ''
    }
  }
};
</script>

<style scoped lang="scss">
// 右键菜单样式
.right-menu {
  position: fixed;
  left: 0;
  top: 0;
  min-width: 166px;
  height: auto;
  //background-color: rgb(242, 242, 242);
  //border: solid 1px #c2c1c2;
  //box-shadow: 0 10px 10px #c2c1c2;
  display: none;
  //border-radius: 5px;
  //ul {
  //  padding: 0;
  //  margin: 0;
  //  font-size: 15px;
  //  li {
  //    list-style: none;
  //    box-sizing: border-box;
  //    padding: 6px 0;
  //    border-bottom: 1px solid rgb(216, 216, 217);
  //    &:nth-child(1) {
  //      padding-top: 2px;
  //    }
  //    &:nth-last-child(1) {
  //      border-bottom: none;
  //    }
  //    div {
  //      height: 25px;
  //      span {
  //        display: block;
  //        height: 100%;
  //        line-height: 25px;
  //        padding-left: 16px;
  //        &:hover {
  //          background-color: #0070f5;
  //          cursor: pointer;
  //          color: #ffffff;
  //        }
  //      }
  //      // 禁止点击样式
  //      .disable {
  //        color: #666666;
  //        &:hover {
  //          cursor: not-allowed;
  //          background-color: #f2f2f2;
  //          color: #666666;
  //        }
  //      }
  //    }
  //  }
  //}
}
</style>
